<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>个人中心</title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="yes" name="apple-touch-fullscreen">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no,email=no" name="format-detection">
		<!--[if lt IE 9]> 
		<script src=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
		<![endif]-->
		<script type="text/javascript" src="../../js/init.js"></script>
		<link rel="stylesheet" href="../../font/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../../css/common.css" />
		<script type="text/javascript" src="../../font/iconfont.js"></script>
		<style>
			html {
				width: 100%;
				height: 100%;
				background-color: #f3f3f3;
			}
			header {
			    background-color: #3285ff;
			    position: relative;
			    height: 0.88rem;
			    width: 100%;
			}
			
			header .title {
			    display: block;
			    height: 0.88rem;
			    line-height: 0.88rem;
			    font-size: 0.36rem;
			    text-align: center;
			    color: #fff;
			}
			
			header .icon-llmainpageback {
			    position: absolute;
			    color: #fff;
			    bottom: 0.2rem;
			    left: 0.2rem;
			}
			
			header .icon-iconfontclosesmall {
			    position: absolute;
			    color: #fff;
			    bottom: 0.2rem;
			    left: 0.6rem;
			}
			
			header .icon-gengduo {
			    position: absolute;
			    color: #fff;
			    bottom: 0.2rem;
			    right: 0.2rem;
			}
			section.top {
				padding: 0.5rem 0;
				height: 2.34rem;
				width: 100%;
				background: url(../../images/bg01.png)repeat scroll top left;
				position: relative;
			}
			.top text {
				color: #fff;
			}
			.top .iconfont {
				font-size: 1.5rem;
				left: 0.2rem;
				position: absolute;
				top: 0.34rem;
			}
			.top .Name {
				display: block;
				padding-left: 2rem;
				font-size: 0.32rem;
				line-height: 0.6rem;
				height: 0.6rem;
			}
			.top .phone {
				display: block; 
				padding-left: 2rem;
				font-size: 0.32rem;
				height: 0.6rem;
				line-height: 0.6rem;
			}
			.bottom .con {
				position: relative;
				height: 1.18rem;
				line-height: 1.18rem;
				border-bottom: 1px solid #e2e2e2;
				background-color: #fff;
			}
			.bottom .con text {
				font-size: 0.32rem;
				color: #333;
			}
			.bottom .con .C {
				position: absolute;
				left: 1.1rem;
			}
			.bottom .con .icon-tiaozhuan {
				position: absolute;
				right: 0.2rem;
				color: #999;
				font-size: 0.3rem
			}
			.bottom .con .icon-gerenxinxi {
				color: #1d93eb;
				position: absolute;
				left: 0.2rem;
				font-size: 0.5rem;
			}
			.bottom .con .icon-tongxunlu-copy-copy{
				color: #3dac3a;
				position: absolute;
				left: 0.2rem;
				font-size: 0.5rem;
			}
			.bottom .con .icon-icon-yxj-bill {
				color: #f13638;
				position: absolute;
				left: 0.2rem;
				font-size: 0.5rem;
			}
			.bottom .con .icon-dingdan2 {
				color: #00a7e0;
				position: absolute;
				left: 0.2rem;
				font-size: 0.5rem;
			}
			.bottom .con .icon-woyaojiebang {
				color: #fac803;
				position: absolute;
				left: 0.2rem;
				font-size: 0.5rem;
			}
			.show {
				display: none;
			}
			.showToast {
				top: 0;
				position: absolute;
				height: 100%;
				width: 100%;
				background-color: rgba(0,0,0,0.5);
			}
			.showT {
				position: absolute;
				top: 5rem;
				left: 1rem;
				background-color: #fff;
				width: 5.64rem;
				height: 3.4rem;
				border-radius: 0.1rem;
				font-size: 0.3rem;
				color: #333;
			}
			.showT .txt {
				padding: 0.45rem 0.1rem 0.6rem;
				border: 1px solid #eee;
			}
			.showT .txt text {
				display: block;
				text-align: center;
				line-height: 0.58rem;
				height: 0.58rem;
			}
			.showT #confirm{
				position: absolute;
				bottom: 0;
				left: 0;
				display: inline-block;
				width: 50%;
				height: 1.1rem;
				line-height: 1.1rem;
				text-align: center;
				color: #ec6941;
				border-right: 1px solid #eee;
			}
			.showT #cancel{
				position: absolute;
				bottom: 0;
				right: 0;
				display: inline-block;
				width: 50%;
				height: 1.1rem;
				line-height: 1.1rem;
				text-align: center;
				color: #ec6941;
			}
		</style>
	</head>
	<body>
		<header>
			<span></span>
			<text class="title">个人中心</text>
			<text class="iconfont icon-llmainpageback" id="back"></text>
			<text class="iconfont icon-iconfontclosesmall"></text>
			<text class="iconfont icon-gengduo"></text>
		</header>
		<section class="top">
			<text class="iconfont icon-xiaolian"></text>
			<text class="Name">崔雪飞</text>
			<text class="phone">132****4569</text>
		</section>
		<section class="bottom">
			<div class="con" id="personalData">
				<text class="iconfont icon-gerenxinxi"></text>
				<text class="C">个人信息</text>
				<text class="iconfont icon-tiaozhuan"></text>
			</div>
			<div class="con" id="addPerson">
				<text class="iconfont icon-tongxunlu-copy-copy"></text>
				<text class="C">添加就诊人</text>
				<text class="iconfont icon-tiaozhuan"></text>
			</div>
			<div class="con" id="paymentInquiry">
				<text class="iconfont icon-icon-yxj-bill"></text>
				<text class="C">缴费查询</text>
				<text class="iconfont icon-tiaozhuan"></text>
			</div>
			<div class="con" id="orderQuery">
				<text class="iconfont icon-dingdan2"></text>
				<text class="C">订单查询</text>
				<text class="iconfont icon-tiaozhuan"></text>
			</div>
			<div class="con" id="unbind">
				<text class="iconfont icon-woyaojiebang"></text>
				<text class="C">解除绑定</text>
				<text class="iconfont icon-tiaozhuan"></text>
			</div>
		</section>
		<section class="showToast show">
			<div class="showT">
				<div class="txt">
					<text class="top">你已经绑定XXXXXX</text>
					<text class="bottom">确定要取消绑定吗？</text>
				</div>
				<text id="confirm">确定</text>
				<text id="cancel">取消</text>
			</div>
		</section>
	</body>
	<script type="text/javascript" src="../../js/common.js"></script>
	<script type="text/javascript">
		document.getElementById("orderQuery").onclick = function(){
			console.log("haha")
			 window.location.href="orderQuery.html?backurl="+window.location.href; 
		}
		document.getElementById("addPerson").onclick = function(){
			console.log("haha")
			 window.location.href="addPerson.html?backurl="+window.location.href; 
		}
		document.getElementById("personalData").onclick = function(){
			console.log("haha")
			 window.location.href="personalData.html?backurl="+window.location.href; 
		}
		document.getElementById("paymentInquiry").onclick = function(){
			console.log("haha")
			 window.location.href="paymentInquiry.html?backurl="+window.location.href; 
		}
		document.getElementById("unbind").onclick = function(){
			var doc = document.getElementsByClassName("showToast")[0];
			removeClass(doc,'show');
		}
		document.getElementById("confirm").onclick = function(){
			var doc = document.getElementsByClassName("showToast")[0];
			addClass(doc,'show');
		}
		document.getElementById("cancel").onclick = function(){
			var doc = document.getElementsByClassName("showToast")[0];
			addClass(doc,'show');
		}
	</script>
</html>
